<template>
    <div class="body">
        <div class="main">
            <div class="form">
                <h4><img src="@/assets/icon_class.png" tppabs="images/icon_class.png">商标注册 <span>Trademark
                        registration</span></h4>
                <div class="item">
                    <span><i>*</i>商标名称：</span>
                    <input v-model="form.name" type="text" class="input sbmc" placeholder="请输入您想要注册的商标名称">
                </div>
                <div class="item">
                    <span>选择行业：</span>
                    <input v-model="form.industry" type="text" class="input xzhy">
                    <div class="refresh"><img src="@/assets/icon_refresh.png" @click="showDropList"><a
                            @click="showDropList">点击切换</a></div>
                    <ul class="dropList" v-if="showDrop">
                        <li v-for="(industry, index) in industries" :key="index"
                            :class="{ on: selectedIndex === index }" @click="selectIndustry(index)">
                            {{ industry }}
                        </li>
                    </ul>
                </div>
                <div class="list">
                    <div class="div div1" v-if="selectedIndex == 0">
                        <div class="core">
                            <h5>核心类别：</h5>
                            <div class="p">
                                <p>第43类-餐饮服务</p>
                                <p>第35类-广告销售</p>
                            </div>
                        </div>
                        <div class="related">
                            <h5>关联类别：</h5>
                            <div class="p">
                                <p>第32类-啤酒饮料</p>
                                <p>第33类-酒</p>
                                <p>第40类-材料加工</p>
                                <p>第29类-食品</p>
                                <p>第7类-机械设备</p>
                                <p>第8类-手工器械</p>
                                <p>第29类-食品</p>
                                <p>第7类-机械设备</p>
                                <p>第8类-手工器械</p>
                            </div>
                        </div>
                    </div>
                    <div class="div div2" v-if="selectedIndex == 1">
                        <div class="core">
                            <h5>核心类别：</h5>
                            <div class="p">
                                <p>第20类-家具</p>
                                <p>第19类-建筑材料</p>
                                <p>第18类-皮革皮具</p>
                                <p>第35类-广告销售</p>
                            </div>
                        </div>
                        <div class="related">
                            <h5>关联类别：</h5>
                            <div class="p">
                                <p>第2类-颜料油漆</p>
                                <p>第6类-金属材料</p>
                                <p>第8类-手工器械</p>
                                <p>第9类-科学仪器</p>
                                <p>第10类-医疗器械</p>
                                <p>第18类-皮革皮具</p>
                                <p>第28类-健身器材</p>
                                <p>第37类-建筑修理</p>
                                <p>第39类-运输贮藏</p>
                                <p>第40类-材料加工</p>
                                <p>第42类-网站服务</p>
                            </div>
                        </div>
                    </div>
                    <div class="div div3" v-if="selectedIndex == 2">
                        <div class="core">
                            <h5>核心类别：</h5>
                            <div class="p">
                                <p>第18类-皮革皮具</p>
                                <p>第24类-布料床单</p>
                                <p>第25类-服装鞋帽</p>
                                <p>第26类-钮扣拉链</p>
                                <p>第35类-广告销售</p>
                            </div>
                        </div>
                        <div class="related">
                            <h5>关联类别：</h5>
                            <div class="p">
                                <p>第7类-机械设备</p>
                                <p>第16类-办公用品</p>
                                <p>第28类-健身器材</p>
                                <p>第37类-建筑修理</p>
                                <p>第40类-材料加工</p>
                                <p>第42类-网站服务</p>
                                <p>第45类-社会服务</p>
                            </div>
                        </div>
                    </div>
                    <div class="div div4" v-if="selectedIndex == 3">
                        <div class="core">
                            <h5>核心类别：</h5>
                            <div class="p">
                                <p>第39类-运输贮藏</p>
                                <p>第41类-教育娱乐</p>
                                <p>第43类-餐饮服务</p>
                                <p>第44类-医疗园艺</p>
                                <p>第35类-广告销售</p>
                            </div>
                        </div>
                        <div class="related">
                            <h5>关联类别：</h5>
                            <div class="p">
                                <p>第14类-珠宝钟表</p>
                                <p>第24类-布料床单</p>
                                <p>第25类-服装鞋帽</p>
                                <p>第26类-钮扣拉链</p>
                                <p>第20类-家具</p>
                                <p>第18类-皮革皮具</p>
                                <p>第9类-科学仪器</p>
                                <p>第21类-厨房洁具</p>
                                <p>第6类-金属材料</p>
                                <p>第28类-健身器材</p>
                            </div>
                        </div>
                    </div>
                    <div class="div div5" v-if="selectedIndex == 4">
                        <div class="core">
                            <h5>核心类别：</h5>
                            <div class="p">
                                <p>第6类-金属材料</p>
                                <p>第17类-橡胶制品</p>
                                <p>第19类-建筑材料</p>
                                <p>第35类-广告销售</p>
                            </div>
                        </div>
                        <div class="related">
                            <h5>关联类别：</h5>
                            <div class="p">
                                <p>第1类-化学原料</p>
                                <p>第2类-颜料油漆</p>
                                <p>第3类-日化用品</p>
                                <p>第7类-机械设备</p>
                                <p>第8类-手工器械</p>
                                <p>第9类-科学仪器</p>
                                <p>第12类-运输工具</p>
                                <p>第37类-建筑修理</p>
                                <p>第39类-运输贮藏</p>
                                <p>第40类-材料加工</p>
                            </div>
                        </div>
                    </div>
                    <div class="div div6" v-if="selectedIndex == 5">
                        <div class="core">
                            <h5>核心类别：</h5>
                            <div class="p">
                                <p>第9类-科学仪器</p>
                                <p>第38类-通讯服务</p>
                                <p>第42类-网站服务</p>
                            </div>
                        </div>
                        <div class="related">
                            <h5>关联类别：</h5>
                            <div class="p">
                                <p>第35类-广告销售</p>
                                <p>第41类-教育娱乐</p>
                            </div>
                        </div>
                    </div>
                    <div class="div div7" v-if="selectedIndex == 6">
                        <div class="core">
                            <h5>核心类别：</h5>
                            <div class="p">
                                <p>第29类-食品</p>
                                <p>第30类-方便食品</p>
                                <p>第31类-饲料种籽</p>
                                <p>第32类-啤酒饮料</p>
                                <p>第33类-酒</p>
                            </div>
                        </div>
                        <div class="related">
                            <h5>关联类别：</h5>
                            <div class="p">
                                <p>第35类-广告销售</p>
                                <p>第39类-运输贮藏</p>
                                <p>第40类-材料加工</p>
                                <p>第44类-医疗园艺</p>
                            </div>
                        </div>
                    </div>
                    <div class="div div8" v-if="selectedIndex == 7">
                        <div class="core">
                            <h5>核心类别：</h5>
                            <div class="p">
                                <p>第1类-化学原料</p>
                                <p>第40类-材料加工</p>
                                <p>第35类-广告销售</p>
                            </div>
                        </div>
                        <div class="related">
                            <h5>关联类别：</h5>
                            <div class="p">
                                <p>第2类-颜料油漆</p>
                                <p>第3类-日化用品</p>
                                <p>第4类-燃料优质</p>
                                <p>第5类-医疗用品</p>
                                <p>第7类-机械设备</p>
                                <p>第16类-办公用品</p>
                                <p>第17类-橡胶制品</p>
                                <p>第42类-网站服务</p>
                            </div>
                        </div>
                    </div>
                    <div class="div div9" v-if="selectedIndex == 8">
                        <div class="core">
                            <h5>核心类别：</h5>
                            <div class="p">
                                <p>第9类-科学仪器</p>
                                <p>第41类-教育娱乐</p>
                                <p>第35类-广告销售</p>
                            </div>
                        </div>
                        <div class="related">
                            <h5>关联类别：</h5>
                            <div class="p">
                                <p>第25类-服装鞋帽</p>
                                <p>第1类-化学原料</p>
                                <p>第16类-办公用品</p>
                            </div>
                        </div>
                    </div>
                    <div class="div div10" v-if="selectedIndex == 9">
                        <div class="core">
                            <h5>核心类别：</h5>
                            <div class="p">
                                <p>第9类-科学仪器</p>
                                <p>第11类-灯具空调</p>
                                <p>第7类-机械设备</p>
                                <p>第35类-广告销售</p>
                            </div>
                        </div>
                        <div class="related">
                            <h5>关联类别：</h5>
                            <div class="p">
                                <p>第8类-手工器械</p>
                                <p>第37类-建筑修理</p>
                                <p>第16类-办公用品</p>
                            </div>
                        </div>
                    </div>
                    <div class="div div11" v-if="selectedIndex == 10">
                        <div class="core">
                            <h5>核心类别：</h5>
                            <div class="p">
                                <p>第36类-金融物管</p>
                                <p>第37类-建筑修理</p>
                                <p>第35类-广告销售</p>
                            </div>
                        </div>
                        <div class="related">
                            <h5>关联类别：</h5>
                            <div class="p">
                                <p>第9类-科学仪器</p>
                                <p>第38类-通讯服务</p>
                                <p>第42类-网站服务</p>
                                <p>第16类-办公用品</p>
                                <p>第44类-医疗园艺</p>
                                <p>第45类-社会服务</p>
                            </div>
                        </div>
                    </div>
                    <div class="div div12" v-if="selectedIndex == 11">
                        <div class="core">
                            <h5>核心类别：</h5>
                            <div class="p">
                                <p>第12类-运输工具</p>
                                <p>第37类-建筑修理</p>
                                <p>第35类-广告销售</p>
                                <p>第11类-灯具空调</p>
                            </div>
                        </div>
                        <div class="related">
                            <h5>关联类别：</h5>
                            <div class="p">
                                <p>第3类-日化用品</p>
                                <p>第9类-科学仪器</p>
                                <p>第14类-珠宝钟表</p>
                                <p>第1类-化学原料</p>
                            </div>
                        </div>
                    </div>
                    <div class="div div13" v-if="selectedIndex == 12">
                        <div class="core">
                            <h5>核心类别：</h5>
                            <div class="p">
                                <p>第41类-教育娱乐</p>
                                <p>第28类-健身器材</p>
                                <p>第35类-广告销售</p>
                            </div>
                        </div>
                        <div class="related">
                            <h5>关联类别：</h5>
                            <div class="p">
                                <p>第27类-地毯席垫</p>
                                <p>第9类-科学仪器</p>
                                <p>第42类-网站服务</p>
                            </div>
                        </div>
                    </div>
                    <div class="div div14" v-if="selectedIndex == 13">
                        <div class="core">
                            <h5>核心类别：</h5>
                            <div class="p">
                                <p>第9类-科学仪器</p>
                                <p>第15类-乐器</p>
                                <p>第35类-广告销售</p>
                            </div>
                        </div>
                        <div class="related">
                            <h5>关联类别：</h5>
                            <div class="p">
                                <p>第16类-办公用品</p>
                                <p>第41类-教育娱乐</p>
                                <p>第9类-科学仪器</p>
                                <p>第42类-网站服务</p>
                            </div>
                        </div>
                    </div>
                    <div class="div div15" v-if="selectedIndex == 14">
                        <div class="core">
                            <h5>核心类别：</h5>
                            <div class="p">
                                <p>第5类-医疗用品</p>
                                <p>第10类-医疗器械</p>
                                <p>第44类-医疗园艺</p>
                                <p>第35类-广告销售</p>
                            </div>
                        </div>
                        <div class="related">
                            <h5>关联类别：</h5>
                            <div class="p">
                                <p>第9类-科学仪器</p>
                                <p>第16类-办公用品</p>
                                <p>第40类-材料加工</p>
                                <p>第42类-网站服务</p>
                                <p>第41类-教育娱乐</p>
                            </div>
                        </div>
                    </div>
                    <div class="div div16" v-if="selectedIndex == 15">
                        <div class="core">
                            <h5>核心类别：</h5>
                            <div class="p">
                                <p>第5类-医疗用品</p>
                                <p>第10类-医疗器械</p>
                                <p>第12类-运输工具</p>
                                <p>第16类-办公用品</p>
                                <p>第25类-服装鞋帽</p>
                                <p>第35类-广告销售</p>
                            </div>
                        </div>
                        <div class="related">
                            <h5>关联类别：</h5>
                            <div class="p">
                                <p>第20类-家具</p>
                                <p>第21类-厨房洁具</p>
                                <p>第28类-健身器材</p>
                            </div>
                        </div>
                    </div>
                    <div class="div div17" v-if="selectedIndex == 16">
                        <div class="core">
                            <h5>核心类别：</h5>
                            <div class="p">
                                <p>第3类-日化用品</p>
                                <p>第31类-饲料种籽</p>
                                <p>第18类-皮革皮具</p>
                                <p>第35类-广告销售</p>
                            </div>
                        </div>
                        <div class="related">
                            <h5>关联类别：</h5>
                            <div class="p">
                                <p>第20类-家具</p>
                                <p>第43类-餐饮服务</p>
                                <p>第44类-医疗园艺</p>
                            </div>
                        </div>
                    </div>
                    <div class="div div18" v-if="selectedIndex == 17">
                        <div class="core">
                            <h5>核心类别：</h5>
                            <div class="p">
                                <p>第9类-科学仪器</p>
                                <p>第35类-广告销售</p>
                                <p>第38类-通讯服务</p>
                                <p>第42类-网站服务</p>
                            </div>
                        </div>
                        <div class="related">
                            <h5>关联类别：</h5>
                            <div class="p">
                                <p>第16类-办公用品</p>
                                <p>第41类-教育娱乐</p>
                            </div>
                        </div>
                    </div>
                    <div class="div div19" v-if="selectedIndex == 18">
                        <div class="core">
                            <h5>核心类别：</h5>
                            <div class="p">
                                <p>第3类-日化用品</p>
                                <p>第21类-厨房洁具</p>
                                <p>第42类-网站服务</p>
                                <p>第35类-广告销售</p>
                                <p>第44类-医疗园艺</p>
                            </div>
                        </div>
                        <div class="related">
                            <h5>关联类别：</h5>
                            <div class="p">
                                <p>第20类-家具</p>
                                <p>第16类-办公用品</p>
                                <p>第38类-通讯服务</p>
                                <p>第36类-金融物管</p>
                                <p>第39类-运输贮藏</p>
                            </div>
                        </div>
                    </div>
                    <div class="div div20" v-if="selectedIndex == 19">
                        <div class="core">
                            <h5>核心类别：</h5>
                            <div class="p">
                                <p>第14类-珠宝钟表</p>
                                <p>第16类-办公用品</p>
                                <p>第35类-广告销售</p>
                                <p>第37类-建筑修理</p>
                                <p>第40类-材料加工</p>
                                <p>第42类-网站服务</p>
                            </div>
                        </div>
                        <div class="related">
                            <h5>关联类别：</h5>
                            <div class="p">
                                <p>第9类-科学仪器</p>
                                <p>第38类-通讯服务</p>
                                <p>第36类-金融物管</p>
                                <p>第39类-运输贮藏</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <span>商标类型：</span>
                    <div class="label">
                        <label :class="tab == 1 ? 'on' : ''" @click="onTab(1)">中文</label>
                        <label :class="tab == 2 ? 'on' : ''" @click="onTab(2)">英文</label>
                        <label :class="tab == 3 ? 'on' : ''" @click="onTab(3)">数字</label>
                        <label :class="tab == 4 ? 'on' : ''" @click="onTab(4)">图形</label>
                        <label :class="tab == 5 ? 'on' : ''" @click="onTab(5)">中文+英文</label>
                    </div>
                </div>
                <div class="bar">
                    <el-button style="width: 150px; height: 50px;" class="reset" @click="reset">重置条件</el-button>
                    <el-button style="width: 150px; height: 50px;" type="primary" class="submit" @click="showModal(3)">立即提交注册</el-button>
                </div>
                <div class="tip">* 注：<span>2022年的商标数据存在部分延迟，可点击此处</span> <a class="swtLink">人工窗口&gt;&gt;</a>
                    <span>免费二次核实</span></div>
            </div>
        </div>
        <div class="operate">
            <a class="get">
                <img src="@/assets/icon_red.png" tppabs="images/icon_red.png">
                <span>免费获取行业注册方案</span>
            </a>
            <a class="down">
                <img src="@/assets/icon_blue.png" tppabs="images/icon_blue.png">
                <span>尼斯分类表下载</span>
            </a>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'

const emits = defineEmits(['change'])

const showDrop = ref(false)
const selectedIndex = ref(0)
const tab = ref(1)
const form = ref({
    industry: ''
})
const industries = ref([
    '餐饮行业', '家居行业', '服装行业', '旅游行业', '建材行业',
    '互联网/IT行业', '食品行业', '化工行业', '摄影行业', '电器行业',
    '地产行业', '汽车行业', '健身行业', '乐器行业', '药品医疗行业',
    '母婴行业', '宠物行业', '传媒行业', '化妆品行业', '珠宝行业'
])

const initData = () => {
    form.value.industry = industries.value[0]
}
initData()

const showDropList = () => {
    showDrop.value = !showDrop.value
    console.log(showDrop.value)
}

const selectIndustry = index => {
    selectedIndex.value = selectedIndex.value === index ? null : index
    form.value.industry = industries.value[selectedIndex.value]
    console.log(selectedIndex.value)
    showDrop.value = false
}

const onTab = key => {
    tab.value = key
}

const reset = () => {
    form.value = {
        name: '',
        hy: ''
    }
}

const showModal = type => {
    emits('change', { type, data: form.value })
}
</script>

<style scoped>
.main .form {
    width: 800px;
}

.main .form .item {
    margin-bottom: 24px;
    position: relative;
}

.main .form .item span {
    margin-right: 25px;
}

.main .form .item .input {
    width: 652px;
}

.main .form .item .label label.on {
    background: url("@/assets/icon_radiusedb.jpg")
        /*tpa=images/icon_radiusedb.jpg*/
        no-repeat left center;
}

.main .form .item .xzhy {
    font-weight: 700;
}

.main .form .item .refresh {
    position: absolute;
    right: 35px;
    top: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    height: 50px;
}

.main .form .item .refresh a {
    text-decoration: underline;
    font-size: 15px;
    color: #4e6ef2;
    margin-left: 8px;
}

.main .form .item .dropList {
    width: 652px;
    padding: 10px 0 16px 27px;
    position: absolute;
    border: solid 1px #707070;
    border-radius: 8px;
    top: 49px;
    left: 143px;
    font-size: 0;
    background-color: #FFFFFF;
}

.main .form .item .dropList li {
    font-size: 16px;
    color: #999999;
    display: inline-block;
    cursor: default;
    width: 153px;
    line-height: 32px;
    padding-left: 26px;
}

.main .form .item .dropList li:nth-child(4n+4) {
    width: 135px;
}

.main .form .item .dropList li:hover {
    font-weight: 700;
    color: #333333;
}

.main .form .item .dropList li.on {
    background: url("@/assets/img_right.jpg")
        /*tpa=images/img_right.jpg*/
        no-repeat 0 center;
    font-weight: 700;
    color: #333333;
}

.main .form .list {
    background-color: #f7f7f7;
    border-radius: 10px;
    font-size: 14px;
    padding: 16px 0px 16px 16px;
    margin-bottom: 20px;
    margin-left: 13px;
}

.main .form .list h5 {
    padding-left: 15px;
    font-size: 14px;
}

.main .form .list .div1 {
    display: block;
}

.main .form .list .core,
.main .form .list .related {
    display: flex;
    align-items: flex-start;
    line-height: 45px;
}

.main .form .list .core {
    color: #b8732d;
}

.main .form .list .core h5 {
    background: url("@/assets/icon_arrowy.png")
        /*tpa=images/icon_arrowy.png*/
        no-repeat left center;
}

.main .form .list .related {
    color: #666666;
}

.main .form .list .related h5 {
    background: url("@/assets/icon_arrowg.png")
        /*tpa=images/icon_arrowg.png*/
        no-repeat left center;
}

.main .form .list .p {
    display: flex;
    flex-flow: row wrap;
    margin-left: 45px;
    width: 640px;
}

.main .form .list .p p {
    width: 158px;
}
</style>